<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>店铺详情</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
</head>
<body>
<el-row :span="24" border id="app">
    <el-form ref="shopForm" :model="productForm" class="login-container" label-position="left" enctype="multipart/form-data">
        <h1 class="title" >修改产品</h1>
        <div id="_div1" style="display:none;" v-text="productForm.id" ></div>
        <div  style="display:none;" v-text="productForm.businessId" ></div>
        <el-form-item label="产品名称">
            <el-input type="text" style="width: 250px" v-model="productForm.name" ></el-input>
        </el-form-item>
        <el-form-item label="产品价格">
            <el-input type="text" style="width: 250px" v-model="productForm.price" ></el-input>
        </el-form-item>
        <el-form-item label="产品详情">
            <el-input type="textarea" style="width: 250px" :rows="2" v-model="productForm.detail" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上传图片">
            <el-input v-if="false"></el-input>
            <el-upload
                    class="upload-demo"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    :on-change="onchange"
                    :auto-upload="false"
                    list-type="picture">
                <el-button size="small"  type="primary">选择文件</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过1000kb</div>
                <!--                <img v-if="shopForm.imageUrl" :src="shopForm.imageUrl" class="hidden">-->
            </el-upload>
        </el-form-item>
        <el-form-item>
            <el-button id="submit-button" @click="update" style="width: 100%;">提交</el-button>
        </el-form-item>

    </el-form>
</el-row>
</body>
<script th:inline="javascript">
    new Vue({
        el:"#app",
        data:{
            productForm: {
                id:[[${product.id}]],
                name: [[${product.name}]],
                detail: [[${product.detail}]],
                imageUrl:[[${product.imgSrc}]],
                price:[[${product.price}]],
                shopId:[[${product.shopId}]],
                status:[[${product.status}]]
            }
            ,
            fileList:[{
                url:[[${product.imgSrc}]]
            }]
            ,
            formdata:{}
            ,
            isRepeatedData: false
        }

        ,
        methods:{
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            }
            ,
            onchange(file,fileList){
                if(fileList.length>1){
                    fileList.splice(0,1)
                }
                this.productForm.imageUrl = file.raw
                console.log(this.productForm.imageUrl)
            }
            ,
            update(){
                // console.log(this.shopForm.name)
                let format = new FormData()
                format.append("id",this.productForm.id)
                format.append("name",this.productForm.name)
                format.append("detail",this.productForm.detail)
                format.append("price",this.productForm.price)
                format.append("imageUrl",this.productForm.imageUrl)
                this.formdata = format
                console.log(format);
                console.log(this.formdata.get("imageUrl"))
                $.ajax({
                    url:'/product/updateProduct',
                    type:'post',
                    data: this.formdata,
                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                    success:function (data) {
                        if(data==="ok") {
                            alert("添加成功")
                            location.href="/myProducts.html"
                        }else {
                            alert("发生错误")
                        }
                    }


                })

            }
        }
        ,
        created(){

        }
    })
</script>
</html>